<template>
	<view class="container">
		<view>
			<!-- 课程专场 -->
			<view class="course">
				<view class="course-bottom">
					<view 
					  v-for="(course, index) in courseList" 
			          :key="index" 
					  class="course-bottom-list"
					  @click="goDetail(course)">
						<image 
						:src="fileHost + course.headImg" mode="aspectFit"></image>
						<text>{{course.name}}</text>
						<text>共{{course.sectionNodeNumber}}课时<text>|
						</text>{{course.studyNumber}}人已学</text>
					</view>
				</view>
			</view>
			 <!-- <canvas style="width: 750upx; height: 277upx;" canvas-id="myCanvas" id="myCanvas"></canvas> -->
		</view>
	</view>
</template>


<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { mapGetters, mapState } from 'vuex'
	export default {
		components: {
			uniSwiperDot,
			uniLoadMore
		},
		data() {
			return {
				courseList: [],
				currentPage: 1,
				pageSize: 10,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '数据加载中',
					contentnomore: '亲, 没有更多数据啦'
				},
				loadingFirst: false // 是否上拉刷新列表
			}
		},
		
		computed: {
		   ...mapGetters({
		        host: 'common/host',
			    fileHost: 'common/fileHost'
		   })
		},
		
		onLoad () {
			this.getCourseList()
		},
		
		onPullDownRefresh() {
			this.loadingFirst = true
		    this.getCourseList()()   
		},
		
		onReachBottom() {
			this.currentPage++
			this.getCourseList()
		},
		
		methods: {
			
			// 获取课程列表
			getCourseList() {
				let params = {
					pageNumber: this.currentPage, 
					pageSize: this.pageSize
				}
				this.$httpApi.get('/student/courseInfo', params)
				.then(res => {
					let result = res.data
					if (result.dataList.length === 0
					|| result.dataList.length < this.pageSize) {
						this.status = 'noMore'
					}
					if (this.loadingFirst) {
						this.courseList = []
						setTimeout(() => {
							this.courseList = result.dataList
							this.loadingFirst = false
							uni.stopPullDownRefresh()
						}, 800)
					} else {
						this.courseList = this.courseList.concat(result.dataList)
					}
				})
			},
			
			// 进入课程
			goDetail (item) {
				this.$store.commit('courseInfo/updateCourseInfo', item)
				uni.navigateTo({
					url: '../course/course-detail'
				})
			},
		},
		
	}
</script>


<style lang="less">
@import './index.less';
@import './goods-course.less';
@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(720deg);
	}
}
.an {
	animation: rotation 2s infinite linear;
}
.pause {
	animation-play-state: paused;
}
</style>